<template>
  <div
    id="app"
    class="admin"
  >
    <LeftNav
      ref="LeftNav"
      @changeTitle="changeTitle"
    />
    <div
      class="main"
      :class="{'main-small': smallMenu}"
    >
      <Header
        ref="Header"
        @changeMenu="changeMenu"
      />
      <Tags
        class="tags"
      />
      <div
        id="mainContent"
        class="mian-content"
      > 
        <!-- <keep-alive> -->
          <router-view :key="$route.fullPath" />
          
        <!-- </keep-alive> -->
      </div>
    </div>
  </div>
</template>

<script>
import LeftNav from './components/LeftNav';
import Header from './components/Header';
import Tags from './components/Tags'
export default {
  name: 'App',
  components: {
    LeftNav,
    Header,
    Tags,
  },
  data() {
    return {
      smallMenu: localStorage.getItem('smallMenu') === 'Y'
    };
  },
  methods: {
    changeTitle(val) {
      this.$refs.Header.title = val;
    },
    changeMenu() {
      this.smallMenu = !this.smallMenu;
      localStorage.smallMenu = this.smallMenu ? 'Y' : 'N';
      this.$refs.LeftNav.toggleMenu(this.smallMenu);
    }
  },
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  display: flex;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  background: #f2f2f2;  
  .mian-content {
    padding: 16px!important;
    margin: 110px 20px 20px!important;
    max-height: calc(100vh - 130px);;
    overflow-y: auto;
    min-width: 1000px!important;
    background: #fff!important;
  }
}
.mian-content,
.main-content {
  transition: all 0.2s ease-in-out;
}
.main-small {
  .header {
    left: 60px;
  }
  .tags {
    left: 60px;
  }
  .mian-content,
  .main-content {
    left: 60px;
  }
}

</style>
